<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no    ">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./css/profile.css">
    <title>profile</title>
</head>

<body>
    <!-- header -->
    <header class="clearfix">
        <!-- <div class="logo fl"><img src="./img/logo.png" alt=""></div> -->
        <div class="back_button fl">
            <p>Back</p>
        </div>

        <div class="messageBar fr">
            <img src="./img/profile/message.png" alt="" class="img_processing">
        </div>

        <div class="nameBar">
            <p>我的</p>
        </div>

    </header>

    <!-- #main -->
    <div id="main">
        <!--    login part  -->
        <div class="login clearfix">
            <div class="usr_photo fl">
                <img src="./img/profile/Head-portrait.png" alt="" class="img_processing">
            </div>
            <div class="usr_others fr clearfix">
                <div class="usr_info fl">
                    <p class="title_text">点击登录</p>
                    <p class="title_text location">常居地未设置</p>
                </div>
                <div class="arrow fr">
                    <p> &gt; </p>
                </div>
            </div>
        </div>
        <!--    personal space   -->
        <div class="psn_space">
            <div class="psn_area review_box">
                <div class="img_box review_img"><img src="./img/profile/review.png" alt="" class="img_processing"></div>
                <div class="text_box"><p class="title_text">我的点评</p></div>
            </div>
            <div class="psn_area colect_box">
                <div class="img_box colect_img"><img src="./img/profile/collect.png" alt="" class="img_processing"></div>
                <div class="text_box"><p class="title_text">我的点评</p></div>
            </div>
            <div class="psn_area coupons_box">
                <div class="img_box coupons_img"><img src="./img/profile/coupons.png" alt="" class="img_processing"></div>
                <div class="text_box"><p class="title_text">我的点评</p></div>
            </div>
            
        </div>
        <!--    my items -->
        <div class="items">
            <!-- 1. money -->
            <div class="item_area clearfix">
                <div class="item_icon fl">
                    <img src="./img/profile/money.png" alt="" class="img_processing">
                </div>
                <div class="item_info fr clearfix">
                        <p class="title_text item_text fl">我的钱包</p>
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="title_text for_more_text fr">更多</p>
                </div>
            </div>
            <!-- 2. dianping -->
            <div class="item_area clearfix">
                <div class="item_icon fl">
                    <img src="./img/profile/to-review.png" alt="" class="img_processing">
                </div>
                <div class="item_info fr clearfix">
                        <p class="title_text item_text fl">待点评</p>
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="title_text for_more_text fr">更多</p>
                </div>
            </div>
            <!-- 3. find friend -->
            <div class="item_area clearfix">
                <div class="item_icon fl">
                    <img src="./img/profile/friends.png" alt="" class="img_processing">
                </div>
                <div class="item_info fr clearfix">
                        <p class="title_text item_text fl">找好友</p>
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="title_text for_more_text fr">更多</p>
                </div>
            </div>
            <!-- 4. my footprint -->
            <div class="item_area clearfix">
                <div class="item_icon fl">
                    <img src="./img/profile/footprint.png" alt="" class="img_processing">
                </div>
                <div class="item_info fr clearfix">
                        <p class="title_text item_text fl">我的足迹</p>
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="title_text for_more_text fr">更多</p>
                </div>
            </div>
            <!-- 5. setting -->
            <div class="item_area clearfix">
                <div class="item_icon fl">
                    <img src="./img/profile/setting.png" alt="" class="img_processing">
                </div>
                <div class="item_info fr clearfix">
                        <p class="title_text item_text fl">设置</p>
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="title_text for_more_text fr">更多</p>
                </div>
            </div>
            <!-- 6. phone -->
            <div class="item_area clearfix">
                <div class="item_icon fl">
                    <img src="./img/profile/contact.png" alt="" class="img_processing">
                </div>
                <div class="item_info fr clearfix">
                        <p class="title_text item_text fl">联系</p>
                        <div class="for_more_icon fr"><img src="./img/icon2.png" alt="" class="img_processing"></div>
                        <p class="title_text for_more_text fr">更多</p>
                </div>
            </div>




        </div>
        <!--    button area  -->

    </div>
    <!-- footer -->
    <footer>
        <div class="menu">
            <div class="menu_area">
                <a href="./index.html">
                    <div class="menu_img"><img src="./img/home.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>首页</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./classify.html">
                    <div class="menu_img"><img src="./img/class.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>分类</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./discover.html">
                    <div class="menu_img"><img src="./img/discover.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>发现</p>
                    </div>
                </a>
            </div>
            <div class="menu_area">
                <a href="./profile.html">
                    <div class="menu_img"><img src="./img/profile/person.png" alt="" class="img_processing"></div>
                    <div class="menu_name">
                        <p>我的</p>
                    </div>
                </a>
            </div>
        </div>
    </footer>

    <script>


        document.body.style.height = window.innerHeight + "px";

        /*动态改变根元素字体大小*/
        function recalc() {
            // 获取客户端宽度
            var clientWidth = document.documentElement.clientWidth;
            if (!clientWidth) return;
            // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
            document.documentElement.style.fontSize = 100 * (clientWidth / 750) + 'px';

        }

        function initRecalc() {
            recalc();
            // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if (!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();



    </script>
</body>

</html>